@use "styles/Radius.module.scss";
@use "styles/Spacings.module.scss";
@use "styles/Transitions.module.scss";
@use "styles/Typography.module.scss";

.foldable_section_wrapper {
  display: flex;
  flex-direction: column;
  border-radius: Radius.$normal;
  border: 1px dashed var(--border-0);
  overflow: hidden;
  font-size: Typography.$small;

  .contentWrapper {
    overflow: hidden;
    transition: max-height 0.3s Transitions.$easeOutBack;
  }

  .contentCollapsed {
    max-height: 0;
  }

  &.hide_border {
    border-color: transparent;
  }

  .header_wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: Spacings.$spacing03;

    .header_left {
      display: flex;
      align-items: center;
      gap: Spacings.$spacing03;
      overflow: hidden;

      .header_title {
        @include Typography.EllipsisOverflow;
      }
    }

    &:hover {
      background-color: var(--background-3);

      .header_left {
        .header_title {
          color: var(--primary-0);
        }
      }
    }
  }

  .icon_rotate {
    transition: transform 0.3s Transitions.$easeOutBack;
  }

  .icon_rotate_down {
    transform: rotate(0deg);
  }

  .icon_rotate_right {
    transform: rotate(90deg);
  }
}
